<p>This rule raises an issue when legacy DOM manipulation methods like <code>replaceChild()</code>, <code>insertBefore()</code>,
<code>insertAdjacentText()</code>, or <code>insertAdjacentElement()</code> are used instead of their modern equivalents.</p>
<h2>Why is this an issue?</h2>
<p>Legacy DOM manipulation methods like <code>replaceChild()</code> and <code>insertBefore()</code> require more verbose code and often need you to
traverse to parent nodes unnecessarily.</p>
<p>For example, <code>parentNode.replaceChild(newNode, oldNode)</code> requires you to access the parent node and remember the correct parameter
order. The modern <code>oldNode.replaceWith(newNode)</code> is more intuitive - you call the method directly on the element you want to replace.</p>
<p>Similarly, <code>insertAdjacentText()</code> and <code>insertAdjacentElement()</code> use position strings like 'beforebegin' or 'afterend' that
are harder to remember and less readable than the descriptive method names like <code>before()</code>, <code>after()</code>, <code>append()</code>,
and <code>prepend()</code>.</p>
<p>The modern methods also offer additional benefits:</p>
<ul>
  <li> They accept multiple arguments, allowing you to insert several nodes at once </li>
  <li> They work with both DOM nodes and text strings </li>
  <li> They have more descriptive names that make code self-documenting </li>
  <li> They eliminate the need to traverse to parent nodes in many cases </li>
</ul>
<h3>What is the potential impact?</h3>
<p>Using legacy DOM methods makes code harder to read and maintain. The verbose syntax and required parent node traversal increase the chance of
errors and make the code less intuitive for other developers.</p>
<h3>How to fix?</h3>
<p>Replace <code>replaceChild()</code> with <code>replaceWith()</code> called directly on the element to be replaced.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
parentNode.replaceChild(newElement, oldElement); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
oldElement.replaceWith(newElement);
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-modern-dom-apis.md">prefer-modern-dom-apis</a> </li>
  <li> MDN: ChildNode.before() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before">Documentation for the modern before()
  method</a> </li>
  <li> MDN: ChildNode.after() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after">Documentation for the modern after()
  method</a> </li>
  <li> MDN: ChildNode.replaceWith() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith">Documentation for the modern
  replaceWith() method</a> </li>
  <li> MDN: Element.append() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/append">Documentation for the modern append()
  method</a> </li>
  <li> MDN: Element.prepend() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend">Documentation for the modern prepend()
  method</a> </li>
</ul>
